<template>
<!--  <photo-wall :width="500" :imageInfo="images"></photo-wall>-->
<!--  <rotation :img-data="images" />-->
  <div>
    <div v-if="false" class="color-select" :style="{background: color}">
      <color-picker :value.sync="color" />
    </div>
    <div id="svg" class="svg-div">
    </div>
    <div class="texture">
      <span class="span">
        我是谁<br>我是谁
      </span>
      <span>我是谁<br>我是谁</span>
    </div>
<!--    <canvas id="font" width="300" height="900"></canvas>-->
  </div>
</template>

<script>
import image1 from '@/assets/1.jpg'
import image2 from '@/assets/img/2.jpg'
import image3 from '@/assets/img/3.jpg'
import image4 from '@/assets/img/4.jpg'
import image5 from '@/assets/img/5.jpg'
import image6 from '@/assets/img/6.jpg'
import image7 from '@/assets/img/7.jpg'
import image8 from '@/assets/img/8.jpg'
// import PhotoWall from '@/components/PhotoWall'
// import Rotation from '@/components/rotation'
import ColorPicker from '@/components/ColorPicker/index'
// import FontMetrics from 'fontmetrics'
// import drawVerticalText from '@/utils/verticalText'
// import computeFont from '@/utils/computeFont'

export default {
  name: 'Right',
  data() {
    return {
      color: '#666666',
      state: false,
      /* images: [
        {
          url: image1,
          width: 4000,
          height: 2699
        },
        {
          url: image2,
          width: 640,
          height: 450
        },
        {
          url: image3,
          width: 550,
          height: 420
        },
        {
          url: image4,
          width: 650,
          height: 450
        },
        {
          url: image5,
          width: 600,
          height: 350
        },
        {
          url: image6,
          width: 560,
          height: 500
        },
        {
          url: image7,
          width: 670,
          height: 410
        },
        {
          url: image8,
          width: 620,
          height: 340
        }
      ]*/
      images: [
        {
          url: image1
        },
        {
          url: image2
        },
        {
          url: image3
        },
        {
          url: image4
        },
        {
          url: image5
        },
        {
          url: image6
        },
        {
          url: image7
        },
        {
          url: image8
        }
      ],
      svgDom: []
    }
  },
  components: {
    ColorPicker,
    // Rotation
    // PhotoWall
  },
  computed: {
  },
  mounted() {
    // console.log(CanvasRenderingContext2D)
    // var canvas = document.getElementById('font')
    // var context = canvas.getContext('2d')
    // context.font = '70px azx'
    // context.textAlign = 'center'
    // context.textBaseline = 'top'
    // context.fillTextVertical('胡晓波骚包体', canvas.width / 2, 0)
    // computeFont('演', { fontSize: 70, fontFamily: 'azx', height: 84, fontWeight: 500 })
  },
  methods: {
    setFont() {
      const canvas = document.createElement('canvas')
      canvas.width = 1000
      canvas.height = 1000
      const ctx = canvas.getContext('2d')
      ctx.font = '100px abcdef'
      // ctx.textBaseline = 'baseline'
      const text = ctx.measureText('再')
      document.body.appendChild(canvas)

      console.log('actualBoundingBoxAscent', text, text.actualBoundingBoxAscent + text.actualBoundingBoxDescent)
    }
  }
}
</script>

<style lang="scss" scoped>

.ces {
  position: relative;
  width: 600px;
  height: 400px;

  & > div {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
  }
}

.color-select {
  width: 200px;
  height: 100px;
  position: relative;
}

.texture {
  font-size: 60px;
  font-family: 'microsoft yahei';
  background-image: url(../../assets/1.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  & > .span {
    position: absolute;
    background-image: linear-gradient(to bottom, #f00, #f00);
    mix-blend-mode: overlay;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

    /*&::before {
      content: attr(data-text);
      //content: 'text here first\Atext here second';
      white-space: pre;
    }*/
  }
}
</style>
